<template>
  <section>
    <el-drawer
      :visible.sync="drawer"
      :withHeader="false"
      direction="rtl"
      @close="close"
      :size="500"
      style="font-size: 1.2rem; color: black"
    >
      <div class="content">
        <!-- <quick-panel :title="row.name">
          <div class="info">
            <h2>
              <quick-tag-plain
                label="项目"
                :value="row.project_name"
                type="yellow"
              />
              <quick-tag-plain
                label="项目需求"
                :value="row.project_demand_name"
                type="blue-2"
              />
              <quick-tag-plain
                label="负责人"
                :value="row.leader_name"
                type="green-4"
              />
              <quick-tag-plain
                label="状态"
                :value="row.status_name"
                type="yellow-2"
              />
            </h2>

            <p class="grade">
              <span>
                <quick-tag
                  :value="row.status_name"
                  type="warning"
                  v-if="row.status == 2" />
                <quick-tag
                  :value="row.status_name"
                  type="success"
                  v-if="row.status == 3" />
                <quick-tag
                  :value="row.status_name"
                  type="danger"
                  v-if="row.status == 4"
              /></span>
              <span>
                <quick-stamp
                  v-if="row.work_load < row.real_work_load"
                  label="超期"
                  type="primary"
                />
              </span>
            </p>
            <div class="real">
              <span class="progress">
                <span>进度</span>
                <el-progress
                  :percentage="row.progress ? +row.progress : 0"
                  :stroke-width="1"
                ></el-progress>
              </span>
            </div>

            <p>
              {{ row.remark }}
            </p>

            <div class="footer">
              <p class="desc">
                <span>{{ row.plan_start_date }}</span> -
                <span>{{ row.plan_end_date }}</span>
              </p>
              <p class="desc">
                <span>{{ row.creator_name }}</span> 创建于
                <span>{{ row.create_date }}</span>
              </p>
            </div>
          </div>
        </quick-panel> -->
        <div class="jobcard">
          <project-job-card :item="row" :noAction="false"> </project-job-card>
        </div>
        <div class="list">
          <!-- <div class="btn">
            <el-button
              type="primary"
              size="mini"
              @click="report(row)"
              :disabled="disabled"
              >汇报</el-button
            >
          </div> -->
          <!-- <el-timeline :reverse="false">
            <el-timeline-item
              v-for="item in items"
              :key="item.id"
              :timestamp="item.create_date"
            >
              {{ item.remark }}
            </el-timeline-item>
          </el-timeline> -->
          <el-timeline :reverse="false">
            <el-timeline-item
              v-for="item in items"
              :key="item.id"
              :timestamp="item.create_date"
            >
              <div class="report">
                <div class="head">
                  <div class="stage">
                    <span>
                      <el-tag
                        effect="plain"
                        size="mini"
                        v-if="item.status == 3"
                        type="success"
                      >
                        {{ item.status_name }}
                      </el-tag>
                      <el-tag
                        effect="plain"
                        size="mini"
                        type="danger"
                        v-if="item.overdue == 1"
                      >
                        {{ item.overdue_name }}
                      </el-tag>
                      <el-tag
                        effect="plain"
                        size="mini"
                        type="warning"
                        v-else-if="item.danger == 1"
                      >
                        {{ item.danger_name }}
                      </el-tag>
                      <el-tag
                        effect="plain"
                        size="mini"
                        v-if="item.status == 1"
                      >
                        {{ item.status_name }}
                      </el-tag>
                    </span>
                    <span class="item_name">
                      {{ item.project_name }}
                    </span>
                    <span class="item_name">
                      {{ item.project_demand_name }}
                    </span>
                  </div>
                  <div class="status"></div>
                </div>
                <!-- {{ item }} -->
                <div class="content">
                  <span class="remark"> {{ dealremark(item.remark) }}</span>
                  <span class="progress"
                    ><el-progress
                      :percentage="item.progress ? +item.progress : 0"
                      v-if="item.progress < 100 && item.progress > 0"
                      :stroke-width="2"
                    ></el-progress
                  ></span>
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-drawer>
  </section>
</template>
  
  <script>
import _api from "@/common/api/project_job_report";
import ProjectJobCard from "./ProjectJobCard.vue";
import moment from "moment";
export default {
  components: {
    ProjectJobCard,
  },
  data() {
    return {
      drawer: false,
      loading: false,
      disabled: false,
      progress: "",
      search: {},
      items: [],
      row: {},
      newDate: "",
      originalrow: {},
    };
  },
  methods: {
    showDrawer(row) {
      this.drawer = true;
      this.progress = row.progress;
      if (row.status == 3 || row.status == 4) {
        this.disabled = true;
      }
      this.row = Object.assign({}, row);
      this.originalrow = this.row;
      this.search = Object.assign(
        {},
        {
          project_job_id: +row.id,
        }
      );
      this.getReportList();
    },

    async getReportList() {
      try {
        const result = await _api.getListAsync(this.search);
        this.items = result.data;
        this.$emit("reportedList", {});
      } catch (error) {}
    },

    report(row) {
      this.$refs.report.showDialog(row);
    },

    onReported() {
      this.getReportList();
    },

    close() {
      this.disabled = false;
      this.row = this.originalrow;
    },

    dealremark(remarks) {
      const arr = remarks.split("+");
      arr.splice(arr.length - 1, 1);
      const remark = arr.join("");
      return remark;
    },

    getNewDate() {
      const date = new Date();
      this.newDate = moment(date).format("yyyy-MM-DD");
    },

    dealDate(item) {
      return moment(item).format("yyyy-MM-DD");
    },
  },
  computed: {},
  mounted() {
    this.getNewDate();
  },
};
</script>
  
  <style lang="scss" scoped>
.content {
  padding: 10px 10px;

  .title {
  }
  .list {
    margin-top: 20px;
    .btn {
      display: flex;
      justify-content: flex-end;
    }
  }

  .form {
    padding: 10px 0;

    .form_footer {
      display: flex;
      justify-content: flex-end;
      // justify-content: space-between;
    }
  }
}

.info {
  line-height: 1.5;

  h1 {
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 2.5;
    .no {
      color: #666;
    }
  }

  h2 {
    margin: 5px 0;
  }

  .semester {
    font-size: 1.2rem;
    height: 24px;
    line-height: 24px;
    margin: 5px 0;

    // span {
    //   @include tag2(#67c23a);
    // }
  }

  .grade {
    font-size: 1.2rem;
    height: 24px;
    line-height: 24px;
    margin: 5px 0;
    .real {
      width: 100px;
    }
    span {
      // @include tag2(#409eff);
    }
  }

  .footer {
    margin-top: 10px;
    .desc {
      font-size: 1.3rem;
      color: #666;
      font-weight: bold;

      span {
        font-size: 1.2rem;
        font-weight: 400;
        color: #999;
      }
    }
  }
}
.jobcard {
  display: flex;
  justify-content: center;
}

.report {
  .head {
    display: flex;
    justify-content: space-between;

    align-items: center;
    .status {
      font-size: 1.6rem;
      font-weight: 700;
      margin-right: 10px;
    }
    .stage {
      font-weight: 400;
      margin-right: 10px;
      color: #909399;
      display: flex;
      align-items: center;
      .item_name {
        margin-right: 5px;
      }
      .progress::after {
        content: "%";
      }
    }
    .user {
      margin-left: auto;
    }
  }

  .content {
    margin: 10px 0;

    .remark {
      display: flex;
      font-size: 1.6rem;
      width: 400px;
      font-weight: 600;
      color: black;
      line-height: 1.5;
      text-align: left;
    }
    .progress {
      .el-progress {
        width: 400px;
      }
    }
  }
}
</style>